<template>
  <div class="iwork_box">
    <!-- 头部返回 -->
    <div class="iwork_header">
      <div class="header_icon">
        <i class="el-icon-arrow-left icon_left" @click="goHome"></i>
      </div>
      <div class="header_title" v-if="falg == 1">{{ serachDuFrom.title }}</div>
      <div class="header_title" v-else>{{ serachDuFrom.newTitle }}</div>
      <div
        v-if="falg == 1"
        style="margin-top: -5px; width: 19%"
        @click="handleHistory()"
      >
        <van-button type="info" size="mini">历史记录</van-button>
      </div>
    </div>
    <!-- logo - 标题 -->
    <!-- <div class="iwork_logo">
      <img src="../../../assets/homeNew/iworkHtml.png" alt="" srcset="" />
      <span class="logo_title">营业厅工信部投诉预警</span>
    </div> -->
    <!-- 详情信息 -->
    <div class="iwork_detail">
      <div class="detail_title">
        <div>{{ serachDuFrom.fuTitle }}</div>

        <span style="color: red">本监控周期内派单未回复,请尽快回单!</span>
      </div>
      <!-- <div class="detail_line"></div> -->
      <!-- <div class="detail_content">
        {{serachDuFrom.contant}}
      </div> -->
      <div class="detail_content" v-html="serachDuFrom.contant"></div>
    </div>
    <!-- 附件清单 -->
    <div class="iwork_file">
      <div class="file_title">附件清单</div>

      <div class="file_name">
        <ul v-for="(item, index) of fileListData" :key="index">
          <!-- <li @click="handleFile(item)">{{ item.fileName }} <span>下载</span></li> -->
          <!-- <a @click="handleFile(item)">{{ item.fileName }}</a> -->
          <!-- // let indexOf = fileData[index].lastIndexOf("\/");  
              // let str = fileData[index].substring(indexOf + 1, fileData[index].length); -->
          <li>
            <a :href="item.fileName">{{ item.fileNameTiele }}</a>
          </li>
          <!-- <a :href="item.fileName">{{ item.fileName.lastIndexOf("\/").substring(0, item.fileName.length) }}</a> -->
          <div class="file_line"></div>
        </ul>
      </div>
    </div>

    <!-- 表单 -->
    <div class="iwork_from">
      <el-form
        label-position="top"
        :model="iworkFrom"
        :rules="rules"
        ref="iworkFrom"
      >
        <el-form-item
          label="工单超出原因分析"
          class="iwork_from_item"
          prop="processWork"
        >
          <el-input
            :disabled="
              falg == 1 && iworkFrom.processSubmint === '0' ? false : true
            "
            v-model="iworkFrom.processWork"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="TOP区域及存在问题"
          class="iwork_from_item"
          prop="processTop"
        >
          <el-input
            :disabled="
              falg == 1 && iworkFrom.processSubmint === '0' ? false : true
            "
            v-model="iworkFrom.processTop"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="整改措施"
          class="iwork_from_item"
          prop="processRectification"
        >
          <el-input
            :disabled="
              falg == 1 && iworkFrom.processSubmint === '0' ? false : true
            "
            v-model="iworkFrom.processRectification"
            type="textarea"
            :maxlength="maxlength"
            :autosize="{ minRows: 3, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="对接材料" class="iwork_from_itemTow">
          <!-- v-if="iworkFrom.processSubmint === '0'" -->
          <div class="surfaceThree" v-if="iworkFrom.processSubmint === '0'">
            <input
              type="file"
              id="avatar"
              name="avatar"
              multiple
              @change="choiceFile"
            />
          </div>
          <!-- <el-upload
            v-if="iworkFrom.processSubmint === '0'"
            accept=".pdf, .doc, .docx, .xls, .xlsx ,.png ,.ppt, .word"
            class="upload-demo"
            :action="action"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            multiple
            :limit="30"
            :show-file-list="false"
            :auto-upload="true"
            :on-exceed="handleExceed"
            :file-list="fileListFile"
            :onSuccess="uploadSuccess"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload> -->
          <div v-if="fileListFile.length > 0" style="width: 98%">
            <ul
              v-for="(item, index) in fileListFile"
              :key="index"
              class="file_li"
            >
              <li>
                {{
                  item.name.length > 60
                    ? item.name.substring(0, 35) + "..."
                    : item.name
                }}
                <!-- <div style="float: right; margin-right: 5px">
                  <el-button
                    type="primary"
                    style="margin-left: 20px"
                    size="mini"
                    v-if="item.name != ''"
                    @click="handleDownLoad(item.name)"
                    >下载</el-button
                  >
                  <el-button
                    type="danger"
                    style="margin-left: 20px"
                    size="mini"
                    v-if="item.name != ''"
                    @click="handleDelect(item, index)"
                    >删除</el-button
                  >
                </div> -->
              </li>
              <div class="file_line"></div>
            </ul>
          </div>
          <!--点击提交后会显得附件 -->
          <div class="file_name">
            <ul v-for="(item, index) of fileListDataUp" :key="index">
              <!-- <li @click="handleFile(item)">{{ item.fileName }} <span>下载</span></li> -->
              <!-- <a @click="handleFile(item)">{{ item.fileName }}</a> -->
              <!-- // let indexOf = fileData[index].lastIndexOf("\/");  
              // let str = fileData[index].substring(indexOf + 1, fileData[index].length); -->
              <li>
                <!-- <a :href="item.fileName.includes('.') ? item.fileName : item.fileName + '.png'">{{ item.fileName }}</a> -->
                <a :href="item.fileName">{{ item.fileNameTiele }}</a>
                <!-- <a :href="item.fileName">{{ item.fileName }}</a> -->
                <!-- aaa={{item.fileName.lastIndexOf('/').substring(0, item.fileName.length)}} -->
                <!-- <a :href="item.fileName.lastIndexOf('/').substring(0, item.fileName.length) ? item.fileName : item.fileName + '.png'">{{ item.fileName }}</a> -->
                <!-- <a :href="item.fileName">{{ item.fileNameTiele }}</a> -->
                <!-- <div>{{item.fileName.includes(".png") ? 1 : 0}}</div>
                <div>{{item.fileName.includes(".jpg") ? 1 : 0}}</div> -->
              </li>
              <!-- <a :href="item.fileName">{{ item.fileName.lastIndexOf("\/").substring(0, item.fileName.length) }}</a> -->
              <div class="file_line"></div>
            </ul>
          </div>
        </el-form-item>
        <el-form-item class="submit_box">
          <!-- :disabled="iworkFrom.processSubmint === '0' ? false : true" -->
          <!-- :disabled="iworkFrom.processSubmint === '0' ? false : true"
            v-if="falg == 1" -->
          <el-button
            :disabled="iworkFrom.processSubmint === '0' ? false : true"
            v-if="falg == 1"
            type="primary"
            @click="onSubmit('iworkFrom')"
            style="margin-top: 10px"
            class="button_box"
            >提 交</el-button
          >
          <!-- :disabled="iworkFrom.processExamine === '0' ? false : true" -->
          <!-- <el-button
            v-if="falg != 1"
            :disabled="iworkFrom.processExamine === '0' ? false : true"
            type="primary"
            @click="onExamine"
            style="margin-top: 10px"
            class="button_box"
            >审 批</el-button
          > -->
        </el-form-item>
        <el-form-item class="submit_box_tow">
          <!-- :disabled="iworkFrom.processExamine === '0' ? false : true" -->
          <el-button
            v-if="falg != 1"
            type="primary"
            @click="onReturn"
            style="margin-top: 10px"
            class="button_box_tow"
            >退 回</el-button
          >
          <!-- :disabled="iworkFrom.processExamine === '0' ? false : true" -->
          <el-button
            v-if="falg != 1"
            type="primary"
            @click="onExamine"
            style="margin-top: 10px"
            class="button_box_tow"
            >通 过</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 历史记录弹框 -->
    <van-popup v-model="historyShow" closeable>
      <div style="line-height: 30px; font-weight: bold; font-size: 16px">
        未回单历史记录
      </div>
      <van-divider />
      <div
        class="history_box"
        @scroll="scrollBottom"
        v-if="iworkList.length > 0"
      >
        <div v-for="(item, index) of iworkList" :key="index">
          <div class="history_card" @click="goSearch(item)">
            <div class="card_boxOne">
              <span>工单超出原因分析：{{ item.processWork }}</span>
              <!-- <span class="box_time">{{ item.expectedTime }}</span> -->
            </div>
            <div class="card_boxTwo">
              <span class="">TOP区域及存在问题：{{ item.processTop }}</span>
              <!-- <span class="go_search" @click="goSearch(item)"
                ><van-button type="info" size="mini">查看</van-button></span
              > -->
              <!-- <span class="box_time">{{ item.createTime }}</span> -->
            </div>
            <div style="text-align: right; margin-top: -10px">
              <span class="box_time">{{
                item.createTime == "" ? "" : item.createTime.substring(0, 10)
              }}</span>
            </div>
          </div>
        </div>
        <div v-if="noMore" class="no_more">没有更多了...</div>
      </div>
      <div v-else>
        <van-empty description="暂无数据..." />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxlength: 30,
      fileData: [],
      logId: "",
      tempId: "",
      falg: null, //区分是提交还是通过、退回按钮 1：提交 2：通过，退回
      serachDuFrom: {
        title: "", //提交人标题
        fuTitle: "", //副标题
        contant: "",
        newTitle: "", //审核人标题
      }, //接口返回的信息
      fileListData: [], //附件清单(头部)
      action: "", //文件上传接口
      fileListFile: [], //底部上传的附件
      fileListDataUp: [], //回显的底部附件
      iworkFrom: {
        processLogId: null, //该流程对应logId
        newlogId: null, //审批时候回拼接在地址栏，提交时候没有
        processWork: "", //工单超出原因分析
        processTop: "", //top区域存在问题
        processRectification: "", //整改举措
        proportionWork: null, //不规范工单占比
        mainProblems: "", //存在的主要问题
        processSubmint: null, //判断提交按钮/表单内容 是否禁用 0：可提交 1：不可提交
        processExamine: null, //判断审批按钮/表单内容 是否禁用 0：可审批 1：不可审批
        submitFile: "", //上传的附件
        staffAccount: null, //工号
        title: "", //阅处人标题
      },
      rules: {
        processWork: [
          {
            required: true,
            message: "请输入工单超出原因分析",
            trigger: "blur",
          },
        ],
        processTop: [
          {
            required: true,
            message: "请输入TOP区域及存在问题",
            trigger: "blur",
          },
        ],
        processRectification: [
          { required: true, message: "请输入整改措施", trigger: "blur" },
        ],
      },
      iworkList: [], //历史数据
      historyShow: false,
      noMore: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  watch: {
    historyShow(newVal, oldVal) {
      if (newVal === false) {
        console.log("弹框关闭");
        this.pageNum = 1;
        this.noMore = false;
        this.iworkList = [];
        this.getIwork();
      } else {
        console.log("弹框打开");
        this.iworkList = [];
        console.log("this.iworkList===", this.iworkList);
        // this.getIwork();
      }
    },
  },
  activated() {
    console.log("返回到此页面");
    console.log("------------", this.$route.params.logId);
    this.$nextTick(() => {
      this.historyShow = false;
      console.log("this.iworkList===", this.iworkList);
      if (this.iworkList.length > 0) {
        this.getIwork();
      } else {
        console.log("12344566");
        this.getSerachProcessdu();
      }
    });
  },
  created() {
    this.getUrl(); //获取地址栏信息
    this.action = this.$http.adornUrl(
      `/cpcpProcessdu/upload?token=${this.$cookie.get("token")}`
    );
  },
  methods: {
    //获取URL地址
    getUrl() {
      // let srt = `http://134.64.251.212:8084/#/iworkHtml?logId=1558226&newlogId=1557713`;
      let srt = window.location.href;
      var reg = srt.substring(srt.indexOf("?") + 1, srt.length).split("&");
      console.log("red==", reg);
      reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        console.info("地址栏", x);
        if (x == "logId") {
          this.logId = data[1];
        }
        if (x == "tempId") {
          this.tempId = data[1];
        }
        if (x == "falg") {
          this.falg = data[1];
        }
        if (x == "newlogId") {
          this.newlogId = data[1];
        }
      });
      console.log("logId=", this.logId);
      console.log("tempId=", this.tempId);
      console.log("falg=", this.falg);
      console.log("newlogId=", this.newlogId);
      this.getSerachProcessdu();
      // console.log("sssssssssssss");
    },
    //长流程查询接口
    getSerachProcessdu() {
      return this.$http({
        url: this.$http.adornUrl("/cpcpProcessdu/serachProcessdu"),
        method: "get",
        params: this.$http.adornParams({
          logId: this.logId,
        }),
      }).then((res) => {
        // console.log("11111111111111111111");
        if (res.data.code === 0) {
          // console.log("res====", res);
          this.serachDuFrom = res.data.data;

          // let str = "软件开发项目的方案应该包括以下部分：\n1. 项目目标：明确软件项目的目标，例如增加用户数量、提高用户满意度等。\n2. 功能需求：列出软件项目需要实现的功能需求，例如用户注册、登录、浏览网页、购物等。\n\n3. 技术选型：根据软件项目的功能需求和技术可行性，选择适合的编程语言、框架、数据库等。\n\n4. 开发环境：安装并配置开发环境，例如IDE、版本控制工具等。\n\n5. 项目计划：制定项目计划，包括开发进度、测试进度、部署进度等。\n\n6. 人员配备：确定软件项目所需的人员配备，例如开发人员、测试人员、运维人员等。\n\n7. 资金预算：估算软件项目的预算，包括开发费用、测试费用、部署费用等。\n\n8. 风险管理：识别并管理项目中的风险，例如技术风险、人员流动风险等。\n以上是软件开发项目的方案，具体内容根据项目的实际情况进行调整。"
          let str = res.data.data.contant;
          str = str.replace(/\n/g, "<br />");
          this.serachDuFrom.contant = str;
          this.iworkFrom.processLogId = res.data.data.processLogId;
          this.iworkFrom.processWork = res.data.data.processWork;
          this.iworkFrom.processTop = res.data.data.processTop;
          this.iworkFrom.processSubmint = res.data.data.processSubmint;
          this.iworkFrom.processExamine = res.data.data.processExamine;
          this.iworkFrom.proportionWork = res.data.data.proportionWork;
          this.iworkFrom.mainProblems = res.data.data.mainProblems;
          this.iworkFrom.staffAccount = res.data.data.processSubmintAccount;
          this.iworkFrom.title = res.data.data.title;
          let titleFu = res.data.data.title;
          // let titleFu = '工信部接管通知-阅处';
          this.iworkFrom.processRectification =
            res.data.data.processRectification;
          let fileData = res.data.data.processFile.split(",");
          let fileListName = [];
          console.log("副标题==", titleFu);
          if (titleFu.includes("接管")) {
            this.serachDuFrom.fuTitle = "接管";
          } else if (titleFu.includes("预警")) {
            this.serachDuFrom.fuTitle = "预警";
          } else if (titleFu.includes("对接")) {
            this.serachDuFrom.fuTitle = "对接";
          } else if (titleFu.includes("升级约谈")) {
            this.serachDuFrom.fuTitle = "升级约谈";
          } else {
            this.serachDuFrom.fuTitle = "约谈";
          }
          console.log("=====================", this.serachDuFrom.fuTitle);
          // console.log("fileData====", fileData);
          //获取文件-循环（头部附件清单）
          for (let index = 0; index < fileData.length; index++) {
            // console.log("index,", index);
            // console.log("index,", fileData[index]);
            let obj = {};
            obj.id = index;
            //预览的地址
            obj.fileName = fileData[index];
            let indexOf = fileData[index].lastIndexOf("/");
            let str = fileData[index].substring(
              indexOf + 1,
              fileData[index].length
            );
            let ttt = "";
            if (str.includes("-")) {
              ttt = str.split(".")[0].split("-")[0] + "." + str.split(".")[1];
            } else {
              ttt = str;
            }
            // let str = element.fileNameTiele.split(".")[0].split("-")[0] + "." +element.fileNameTiele.split(".")[1]
            // console.log("tttttt=", ttt);
            // obj.fileNameTiele = str
            //显示的地址
            obj.fileNameTiele = ttt;
            fileListName.push(obj);
            this.fileListData = fileListName;
          }
          // 底部上传的附件
          let fileDataUp =
            res.data.data.submitFile === null
              ? ""
              : res.data.data.submitFile.split(",");
          let fileDataNameUp = [];
          for (let index = 0; index < fileDataUp.length; index++) {
            // console.log("index,", index);
            console.log("index,", fileDataUp[index]);
            let obj = {};
            obj.id = index;
            //预览的地址
            obj.fileName = fileDataUp[index];
            let indexOf = fileDataUp[index].lastIndexOf("/");
            let str = fileDataUp[index].substring(
              indexOf + 1,
              fileDataUp[index].length
            );
            let ttt = "";
            if (str.includes("-")) {
              ttt = str.split(".")[0].split("-")[0] + "." + str.split(".")[1];
            } else {
              ttt = str;
            }
            console.log("ttt=", ttt);
            // if(ttt.includes('.')){
            //   obj.fileName = fileDataUp[index];
            // }else{
            //   obj.fileName = fileDataUp[index] + '.png';
            // }
            // console.log("tttttt=", ttt);
            // obj.fileNameTiele = str
            //显示的地址
            obj.fileNameTiele = ttt;
            fileDataNameUp.push(obj);
            this.fileListDataUp = fileDataNameUp;
          }
          console.log("fileDataUp==", fileDataUp);
          console.log("fileListData===", this.fileListData);
          console.log("fileListDataUp===", this.fileListDataUp);
          console.log("iworkFrom===", this.iworkFrom);
        } else {
          this.$message.error(res.data.msg);
          this.serachDuFrom = {};
        }
      });
    },
    //返回
    goHome() {
      console.log("返回");
      // window.history.go(-1);
      // history.back();
      this.$router.go(-1); // 返回上一页
    },
    //提交
    onSubmit(iworkFrom) {
      console.log("11111", this.iworkFrom);
      const {
        processLogId,
        processWork,
        processTop,
        processRectification,
        submitFile,
        proportionWork,
        mainProblems,
      } = this.iworkFrom;
      // this.$message.success("提交成功");
      // return
      this.$refs[iworkFrom].validate((valid) => {
        if (valid) {
          if (this.fileListFile.length === 0) {
            this.$message.warning("请上传对接材料");
          } else {
            this.$http({
              url: this.$http.adornUrl("cpcpProcessdu/submit"),
              method: "post",
              data: this.$http.adornData({
                processWork: processWork,
                processTop: processTop,
                processRectification: processRectification,
                processLogId: processLogId,
                submitFile: submitFile,
                proportionWork: proportionWork,
                mainProblems: mainProblems,
              }),
            }).then((res) => {
              if (res.data.code === 0) {
                console.log("-------------", res.data);
                // return
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.$nextTick(() => {
                      // history.back();
                      this.$router.go(-1); // 返回上一页
                    });
                  },
                });
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //退回
    onReturn() {
      console.log("this.iworkFrom;==", this.serachDuFrom);
      // console.log("this.iworkFrom;==",this.serachDuFrom.processExamine);
      // console.log("this.iworkFrom;==",typeof this.serachDuFrom.processExamine);
      if (this.serachDuFrom.processExamine === "1") {
        this.$message.info("该工单已处理");
      } else {
        console.log("sdgfsdfgsdfgfd");
        this.$http({
          url: this.$http.adornUrl("cpcpProcessdu/approveDu"),
          method: "get",
          params: this.$http.adornParams({
            id: this.serachDuFrom.id,
          }),
        }).then((res) => {
          if (res.data.code === 0) {
            console.log("-------------", res.data);
            this.$message({
              message: "退回成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$nextTick(() => {
                  history.back();
                });
              },
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    //通过
    onExamine() {
      const { processLogId } = this.iworkFrom;
      console.log("11111", this.iworkFrom);
      // this.$message.success("提交成功");
      // return
      if (this.serachDuFrom.processExamine === "1") {
        this.$message.info("该工单已处理");
      } else {
        console.log("sdgfsdfgsdfgfd");
        this.$http({
          url: this.$http.adornUrl("cpcpProcessdu/UpdateVo"),
          method: "get",
          params: this.$http.adornParams({
            logId: processLogId,
            newLogId: this.newlogId,
          }),
        }).then((res) => {
          if (res.data.code === 0) {
            console.log("-------------", res.data);
            this.$message({
              message: "审批成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$nextTick(() => {
                  history.back();
                });
              },
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeUpload(file) {
      console.log("file===", file);

      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);

      let isLt = file.size / 1024 / 1024 < 20; // 判断是否小于20mb
      console.log("-----------------", isLt);
      console.log("testmsg===", testmsg);
      if (!isLt) {
        this.$message({
          message: "请上传小于20MB图片!",
          type: "info",
          offset: 80,
        });
        return false;
      } else {
        return true;
      }
    },
    // 上传成功(热门文章)
    uploadSuccess(response, file, fileListFile) {
      console.log("11111111111", response);
      console.log("11111111111", file);
      console.log("11111111111", fileListFile);
      if (response.code === 500) {
        this.$message.error(response.msg);
        //删除上传列表中，失败的文件
        let index = 0;
        for (const i in fileListFile) {
          if (fileListFile[i] == file) {
            index = i;
            break;
          }
        }
        //移出当前文件对象
        fileListFile.splice(index, 1);
      } else {
        this.$message.success("上传成功");
        console.log("111111uploadData=", this.uploadData);
        console.log("11111111111", response);
        console.log("2222222", file);
        console.log("3333333333", file.response.data);
        // this.uploadData.files.push(file.name)
        // console.log("2222222", file.response.data);
        console.log("44444444", fileListFile);
        let data = {};
        data.url = response.data;
        let fileData = file.response.data.split(",");
        console.log("fileDatafileDatafileData", fileData);
        console.log("data=====", data);
        // this.fileListFile.push(data);
        fileData.forEach((element) => {
          // let obj = {}
          console.log("element===", element);
          data.name = element;
        });
        this.fileListFile.push(data);
        console.log("this.fileListFile===", this.fileListFile);
        let fileName = "";
        this.fileListFile.forEach((element) => {
          console.log("======", element.name);
          fileName += element.name + ",";
        });
        console.log("fileNamefileNamefileName====", fileName);
        let fileNmaeNew = fileName.substring(0, fileName.length - 1);
        console.log("fileNmaeNewfileNmaeNew====", fileNmaeNew);
        this.iworkFrom.submitFile = fileNmaeNew;
        console.log("this.dataForm.iworkFrom===", this.iworkFrom.submitFile);
        // this.getPerson();
      }
      // this.getTableData();
    },
    // 上传失败(热门文章)
    // uploadError(response, file, fileList) {
    //   this.$message.error("上传失败，请联系管理员");
    // },
    beforeRemove(file, fileList) {
      console.log("file===", file);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    choiceFile(e) {
      console.log("1111");
      let xxx = document.querySelector("#avatar");
      console.log("xxx=", xxx.value);
      console.log("xxx=", e.target.files);
      let form = new FormData();
      form.append("file", e.target.files[0]);
      let name = form.get("file");
      console.log("form", form);
      console.log("name", name);
      this.$http({
        // url: this.$http.adornUrl("/cpcplog/getCountBYCityCode"),
        url: this.$http.adornUrl(`/cpcpProcessdu/upload`),
        method: "post",
        data: form,
      }).then(({ data }) => {
        if (data.code === 0) {
          this.$message.success("上传成功");
          console.log(data);
          console.log(data.data);
          let dataTow = {};
          let fileData = data.data.split(",");
          console.log("data=====", fileData);
          // this.fileListFile.push(data);
          fileData.forEach((element) => {
            // let obj = {}
            console.log("element===", element);
            dataTow.name = element;
          });
          this.fileListFile.push(dataTow);
          console.log("this.fileListFile===", this.fileListFile);
          let fileName = "";
          this.fileListFile.forEach((element) => {
            console.log("======", element.name);
            let indexOf = element.name.lastIndexOf("/");
            let str = element.name.substring(indexOf + 1, element.name.length);
            // if(str.includes(".")){
            //   fileName += element.name + ",";
            // }else{
            //   fileName += element.name + '.png' + ",";
            // }
            fileName += element.name + ",";
            console.log("--------", str);
          });
          console.log("fileNamefileNamefileName====", fileName);
          let fileNmaeNew = fileName.substring(0, fileName.length - 1);
          console.log("fileNmaeNewfileNmaeNew====", fileNmaeNew);
          this.iworkFrom.submitFile = fileNmaeNew;
          console.log("this.dataForm.iworkFrom===", this.iworkFrom.submitFile);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //点击 - 历史记录
    handleHistory() {
      this.historyShow = true;
      this.getIwork();
    },
    //历史记录数据
    getIwork() {
      this.$http({
        url: this.$http.adornUrl("/cpcpProcessdu/selectData"),
        method: "get",
        params: this.$http.adornParams({
          // staffAccount: "H8611237",
          staffAccount: this.iworkFrom.staffAccount,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          title: this.iworkFrom.title,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.historyShow = true;
          console.log("this.iworkList==", this.iworkList);
          if (data.data.records.length) {
            this.iworkList = [...this.iworkList, ...data.data.records]; // 合并数据
            console.log("合并后的数据==", this.iworkList);
          } else {
            this.noMore = true; // 用一个变量来记录没有更多数据了
          }
        } else {
          this.$message.error(data.msg);
          this.iworkList = [];
        }
      });
    },

    /** 判断滚动到底部 */
    scrollBottom(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement;
      // console.log("scrollTop=", scrollTop);
      // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("触底了，加载数据");
        if (this.noMore) return;
        this.pageNum++;
        this.getIwork();
      } else {
        // console.log("到底了");
      }
    },
    //点击查看 - 进入新页面
    goSearch(item) {
      console.log("item==", item);
      console.log("this.historyShow=", this.historyShow);
      // return
      this.$router.push({
        name: "notReceiptHistoryHtml",
        params: {
          item: item,
        },
      });
      this.historyShow = false;
    },
  },
  mounted() {},
};
</script>

<style lang=scss scoped>
.iwork_box {
  width: 100%;
  /* height: 100vh; */
  /* border: 1px solid #000; */
  padding-bottom: 20px;
  background: rgb(248, 248, 248);
  /* background: gray; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .iwork_header {
    width: 100%;
    position: fixed;
    top: 0px;
    /* color: #2196f3; */
    line-height: 2.9625rem;
    font-size: 16px;
    background: #fff;
    display: flex;
    z-index: 9999;
    > div {
      display: inline-block;
      /* flex: 4; */
      /* width: 40%; */
    }
    .header_icon {
      /* width: 33%; */
      font-size: 25px;
      color: rgb(160, 160, 160);
      margin-left: 0.3125rem;
    }
    .header_title {
      text-align: center;
      /* width: calc(100% - 10px); */
      width: calc(100% - 55px);
      font-weight: bolder;
      font-size: 17px;
    }
  }
  .iwork_logo {
    padding-left: 1.25rem;
    padding-top: 0.3125rem;
    img {
      width: 20%;
      height: 20%;
    }
    .logo_title {
      padding-left: 0.9375rem;
      font-weight: bolder;
    }
  }
  .iwork_detail {
    background: #fff;
    border-radius: 5px;
    /* padding-left: 1.25rem; */
    margin-top: 3.75rem;
    width: 97%;
    padding: 10px 15px;
    position: relative;

    /* border: 1px solid red; */
    .detail_title {
      font-weight: bolder;
      font-size: 16px;
      text-align: center;
      color: red;
    }
    .detail_line {
      border: 0.1px solid #f3efef;
      width: 100%;
      margin-top: 0.3125rem;
    }
    .detail_content {
      margin-top: 0.325rem;
      line-height: 1.55rem;
      min-height: 4.375rem;
      /* color: #a19e9e; */
      color: #969494;
      /* width: 98%; */
    }
  }
  .iwork_detail::after {
    content: "";
    background: url("../../../assets/homeNew/iworkHtml.png") no-repeat;
    /* background-size: 60% 60%; */
    background-size: 160px 100px;
    background-position: 95% 10%;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .iwork_file {
    /* padding-left: 1.25rem; */
    width: 97%;
    padding: 10px 15px;
    margin-top: 0.925rem;
    /* color: #00BCD4; */
    .file_title {
      color: #2196f3;
      /* color: rgb(79,161,252); */
    }
    .file_name {
      width: 98%;
    }
    .file_name ul {
      list-style: none;
      padding-left: 0.625rem;
      margin-bottom: 0px;
      margin-top: 0.625rem;
      line-height: 1.4375rem;
    }
    .file_name ul li a {
      text-decoration: none;
    }
    .file_name ul li span {
      color: rgba(0, 0, 255, 0.5);
      float: right;
    }
    .file_line {
      border: 0.1px dashed #f3efef;
      width: 100%;
      margin-top: 0.3125rem;
    }
  }
  .iwork_from {
    /* padding-left: 1.25rem; */
    /* margin-top: 0.925rem; */
    width: 97%;
    /* border: 1px solid red; */
    /* background: #fff; */
    /* border-radius: 5px; */
    /* padding: 10px 15px; */
  }
  .iwork_from_item {
    /* padding-left: 1.25rem; */
    margin-top: 0.925rem;
    width: 100%;
    /* border: 1px solid red; */
    background: #fff;
    border-radius: 5px;
    padding: 10px 15px 25px 15px;
  }
  .iwork_from_itemTow {
    margin-top: 0.925rem;
    width: 100%;
    border-radius: 5px;
    padding: 10px 15px;
    .file_line {
      border: 0.1px dashed #f3efef;
      width: 100%;
      margin-top: 0.3125rem;
    }
    .file_name {
      width: 98%;
    }
    .file_name ul li a {
      text-decoration: none;
    }
  }
  .iwork_from_itemTow /deep/ .el-form-item__label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
  .iwork_from_itemTow ul {
    list-style: none;
    padding-left: 0.625rem;
    margin-bottom: 0px;
    margin-top: 0.625rem;
    line-height: 1.4375rem;
  }
  /* .iwork_from_itemTow .file_li{
    list-style: none;
    padding-left: 0.625rem;
    margin-bottom: 0px;
    margin-top: 0.625rem;
    line-height: 1.4375rem;
  } */
  .iwork_from /deep/ .el-message-box {
    width: 84%;
  }
  .iwork_from /deep/ .el-form-item {
    margin-bottom: 0px;
  }
  .iwork_from /deep/ .el-form-item__label {
    color: #000;
    font-weight: bolder;
  }
  .iwork_from /deep/ .el-textarea__inner {
    /* color: #9b9b9b; */
    color: #2196f3;
    border: 1px solid gainsboro;
    /* border: none; */
    outline: none;
    resize: none;
    /* width: 95%; */
  }
  .iwork_from /deep/ .el-textarea.is-disabled .el-textarea__inner {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
  /* .iwork_from /deep/ .el-textarea__inner {
  resize: none;
} */
  .iwork_from /deep/ .el-form--label-top .el-form-item__label {
    padding: 0px;
  }
  .submit_box {
    width: 90%;
    text-align: right;
  }
  .button_box {
    width: 90%;
  }
  .submit_box_tow {
    width: 100%;
    text-align: center;
  }
}
.surfaceThree {
  position: relative;
  /* height: 30px; */
  height: 45px;
  width: 73px;
  /* background: #d80505; */
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
  /* font-size: 20px; */
  overflow: hidden;
}
.surfaceThree input {
  position: absolute;
  top: 5px;
  /* right: -243px; */
  left: 1px;
  /* color: #fff; */
  /* height: 30px; */
  height: 45px;
  /* opacity: 0; */
}
</style>
<style lang="scss">
.el-message-box {
  width: 84% !important;
}
</style>
<style scoped>
.iwork_box /deep/ .van-popup--center {
  /* width: 93%; */
  width: 90%;
  height: 80%;
  padding: 5px;
  border-radius: 10px;
}
.iwork_box /deep/ .van-divider {
  margin: 0px;
  border-color: #b9b9b9;
}
.iwork_box /deep/ .van-popup__close-icon--top-right {
  top: 9px;
}
.history_box {
  width: 100%;
  /* border: 1px solid red; */
  /* display: flex;
  flex-wrap: wrap;
  justify-content: center; */
  /* height: 85%; */
  height: 93%;
  overflow-y: auto;
  padding-right: 8px;
}
.history_box > div {
  /* width: 96%; */
  /* margin-left: 10px; */
}
.history_card {
  border: 1px solid gainsboro;
  line-height: 30px;
  border-radius: 6px;
  margin: 8px 0px;
  padding: 4px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.history_card > div {
  line-height: 1.45rem;
}
.history_card /deep/ .van-button--mini {
  height: 18px;
  line-height: 14px;
  padding: 6px 4px;
  font-size: 10px;
}
.history_card .go_search {
  float: right;
  margin-top: -0.4375rem;
}
.history_card .card_boxOne {
  margin-top: 10px;
}
.history_card .card_boxOne > span {
  /* width: 95%; */
  width: 77%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history_card .card_boxOne .box_time {
  text-align: right;
}
.history_card .card_boxTwo .box_time {
  /* text-align: right; */
  float: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* border: 1px solid red; */
}
.history_card .card_boxTwo > span {
  display: inline-block;
}
.history_card .card_boxTwo > span:first-child {
  /* border: 1px solid red; */
  /* width: 95%; */
  width: 79%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no_more {
  text-align: center;
  /* margin-top: 10px; */
  margin-top: 1.5625rem;
  margin-bottom: 1rem;
}
</style>